<template>
  <div class="app-container">
    <div>
    
        <button  @click="clickModelaFm">  测试模态框的封装  </button>
    </div>
    
    <Popup
      :dialogTitle="dialogTitle"
      :visible.sync="dialogVisible"
      @updateVisible="updateVisible"
      @resetPopupData="resetPopupData"
      @submitPopupData="submitPopupData"
      @handleClose="handleClose"
      :popupWidth="'550px'"
    >
      <div style="font-size:16px;color:#3c4354;font-family:PingFangSC-Medium;">
           <FormCom labelWidth="100px"
                            ref="searchForm"
                            @sublime="addUser"
                           :searchData="searchData"
                           :searchForm="searchForm" />
     
      </div>
</Popup>

  </div>
</template>

<script>
// import FixedThead from './components/FixedThead'
// import UnfixedThead from './components/UnfixedThead'
import Popup from './dynamic-table/components/Popup'
import FormCom from './dynamic-table/components/FormComModel'


export default {
  name: 'DynamicTable',
  components: { Popup,FormCom },
   data() {
     let caseState = [
      { label: "男", value: 1 },
      { label: "女", value: 2 }
    ];
    let entrustProps = { label: "label", value: "value" };
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
   
       dialogVisible: false, // 弹框的出现与否
       dialogTitle: '通过', // 标题

      searchData: {},
      searchForm: [
        {
          type: "Input",
          label: "人员姓名",
          prop: "name",
          width: "300",
          placeholder: "请输入",
          // 表单验证
          //rules: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
        },
        {
          type: "Input",
          label: "手机号",
          prop: "phone",
          width: "300",
          placeholder: "请输入",
          rules: [{ required: true, validator: checkPhone, trigger: "blur" }]
        },

        {
          type: "Select",
          label: "性别",
          prop: "sex",
          width: "300",
          // 渲染数组
          options: caseState,
          // 下拉转换
          props: entrustProps,
          change: row => "",
          placeholder: "请选择性别",
          rules: [{ required: true, message: "请选择性别", trigger: "change" }]
        },
        // {
        //   type: "Select",
        //   label: "所属公司",
        //   prop: "companyId",
        //   options: [
        //           { label: "合肥联通", value: 0 },
        //           { label: "合肥电信", value: 1 },
        //   ],
        //   props: entrustProps,
        //   change: row => {
        //     this.changeCompany(row);
        //   },
        //   placeholder: "请选择所属公司",
        //   rules: [{ required: true, message: "请选择所属公司", trigger: "change" }]
        // },
        // {
        //   type: "Select",
        //   label: "所属部门",
        //   prop: "deptId",
        //   options: [
        //         { label: "技术部", value: 0 },
        //         { label: "销售部", value: 1 },
        //   ],
        //   props: entrustProps,
        //   change: row => {
        //     this.changeDepar(row);
        //   },
        //   placeholder: "请选择所属部门",
        //   rules: [{ required: true, message: "请选择所属部门", trigger: "change" }]
        // },
        // {
        //   type: "Select",
        //   label: "当前职务",
        //   prop: "postId",
        //   options: [
        //        { label: "前端开发", value: 0 },
        //        { label: "后端开发", value: 1 },
        //   ],
        //   props: entrustProps,
        //   change: row => {
        //     this.changePosition(row);
        //   },
        //   placeholder: "请选择当前职务",
        //   rules: [{ required: true, message: "请选择当前职务", trigger: "change" }]
        // },
        {
          type: "Date",
          label: "时间",
          prop: "date",
          width: "300",
          //width: "180px",
          placeholder: "请选择时间",
          rules: [{ required: true, message: "请选择时间", trigger: "change" }]
        },
      ],
     

    }
  },
   created() {
        console.log(this)
  },
  methods:{
     addUser(valid) {
      if (valid) {
        console.log(valid)
        console.log(this.searchData)
        this.$message.success('提交成功！')
        // 重置表单,reset为子组件的方法
        // this.$refs.searchForm.reset()
      } else {
        return false
      }
    },
    // 下拉选择分公司，查询部门数据
    changeCompany(row) {
    },
    // 下拉选择部门，查询职位数据
    changeDepar(row) {
    },
    // 职位下拉事件
    changePosition(row) {
    },
    //打开莫太框
    clickModelaFm(){
       this.searchData={
           date: "2023-01-09",
           name: "请求",
           phone: "18756907786",
           sex: 1
       }
       this.dialogVisible = true
    },
     	// 修改是否让页面显示与隐藏的事件
	   updateVisible (val) {
      this.dialogVisible = val
    },
    // 点击取消的事件
    resetPopupData () {
      //  这里可重置数据
      this.dialogVisible = false
    },
    // 点击确定的按钮
    async submitPopupData () {
      let that=this
      that.dialogVisible = false
      console.log(this.searchData)
      //  this.$refs.ruleForm.validate((valid) => {
      //     if (valid) {
      //       // alert('submit!');
      //       console.log(this.ruleForm);
      //       that.dialogVisible = false
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });
    },
    // 关闭弹框（头部的X）
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>



	



